<template>
  <div class="person-viewer">
    <!-- Search Section -->
    <div class="search-section">
      <div class="search-container">
        <input v-model="searchQuery" type="text" class="search-input" placeholder="搜索人物..." @keyup.enter="searchPerson">
        <button class="search-button" @click="searchPerson">
          搜索
        </button>
      </div>
    </div>

    <div class="content-container">
      <!-- Chart Section - 左边 -->
      <div class="chart-section" style="height: calc(100vh - 145px);" :class="{ 'fullscreen': isFullscreen }">
        <div class="chart-card">
          <h2 class="card-title">
            关系图谱
          </h2>

          <div v-if="selectedPerson" id="main" ref="chartContainer" class="chart-container">
            <div v-if="loading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
          <div v-else class="chart-container empty-chart">
            <div class="empty-chart-content">
              <h3 class="empty-title">
                暂无关系图谱数据
              </h3>
              <p class="empty-desc">
                请在左侧搜索框中输入人物姓名并点击搜索按钮
              </p>
            </div>
          </div>
          <div v-if="chartError" class="chart-error">
            图表加载失败: {{ chartError }}
          </div>
        </div>
      </div>

      <!-- Person Information Section - 右边 -->
      <div v-show="!isFullscreen" class="info-section" style="height: calc(100vh - 145px);">
        <div class="info-card" style="height: 60%; overflow-y: auto; height: 60%;">
          <h2 class="card-title">
            个人信息
          </h2>
          <div v-if="selectedPerson" class="info-content">
            <div class="info-item">
              <span class="info-label">姓名:</span>
              <span class="info-value">{{ selectedPerson.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别:</span>
              <span class="info-value">{{ selectedPerson.gender }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">民族:</span>
              <span class="info-value">{{ selectedPerson.ethnicity }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">政治面貌:</span>
              <span class="info-value">{{ selectedPerson.political_status }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">婚姻状态:</span>
              <span class="info-value">{{ selectedPerson.marital_status }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">出生日期:</span>
              <span class="info-value">{{ selectedPerson.birth_date }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">入党时间:</span>
              <span class="info-value">{{ selectedPerson.party_join_date }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">入伍时间:</span>
              <span class="info-value">{{ selectedPerson.enlistment_date }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">退伍时间:</span>
              <span class="info-value">{{ selectedPerson.discharge_date }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">籍贯:</span>
              <span class="info-value">{{ selectedPerson.native_place }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">学历:</span>
              <span class="info-value">{{ selectedPerson.education }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">毕业院校:</span>
              <span class="info-value">{{ selectedPerson.graduation_institution }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">专业技能及特长:</span>
              <span class="info-value">{{ selectedPerson.skills_and_expertise }}</span>
            </div>
          </div>
          <div v-else class="info-content empty-info">
            <div class="empty-info-content">
              <h3 class="empty-title">
                暂无个人信息
              </h3>
              <p class="empty-desc">
                搜索人物后将显示详细信息
              </p>
            </div>
          </div>
        </div>

        <!-- Events Section -->
        <div class="events-card" style="height: 40%; overflow-y: auto;">
          <h2 class="card-title">
            人物事件
          </h2>
          <div class="events-content">
            <div class="event-tabs-wrapper">
              <div class="event-tabs">
                <div v-for="(tab, index) in eventTabs" :key="index"
                  :class="['event-tab', { active: activeTab === tab.type }]" @click="activeTab = tab.type">
                  {{ tab.name }}
                </div>
              </div>
              <!-- 左右滚动指示器 -->
              <div class="tab-scroll-indicator tab-scroll-left" @click="scrollTabs('left')">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="tab-scroll-indicator tab-scroll-right" @click="scrollTabs('right')">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <div v-if="selectedPerson" class="event-list">
              <div v-for="(event, index) in filteredEvents" :key="index" class="event-item">
                <div class="event-date">
                  {{ event.date }}
                </div>
                <div class="event-content">
                  <div class="event-title">
                    {{ event.title }}
                  </div>
                  <div class="event-description">
                    {{ event.description }}
                  </div>
                </div>
              </div>
              <div v-if="filteredEvents.length === 0" class="no-events">
                暂无相关事件
              </div>
            </div>
            <div v-else class="event-list empty-events" style="min-height:50px !important">
              <div class="empty-events-content">
                <h3 class="empty-title">
                  暂无事件数据
                </h3>
                <p class="empty-desc">
                  搜索人物后将显示相关事件
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :fullscreen="true" :modal="true"
      :show-close="true" custom-class="fullscreen-dialog">
      <div id="mainfull" ref="chartmainfull" class="full-screen-chart" />
    </el-dialog>
  </div>
</template>

<script>
import MilitaryRankIcon from '@/assets/icons/military-rank.svg'
import gbrm from '@/assets/icons/gbrm.svg'
import jc from '@/assets/icons/jc.svg'
import pj from '@/assets/icons/pj.svg'
import xgjg from '@/assets/icons/xgjg.svg'
import grxx from '@/assets/icons/grxx.svg'
import zydj from '@/assets/icons/zydj.svg'
import jx from '@/assets/icons/jx.svg'
import xgrw from '@/assets/icons/xgrw.svg'
import xgda from '@/assets/icons/xgda.svg'
import zhongxin from '@/assets/icons/zhongxin.svg'
import zzlsbq from '@/assets/icons/zzlsbq.svg'
import xgsj from '@/assets/icons/xgsj.svg'
import { personApi } from "@/api/p"
var option = null

export default {
  name: 'PersonViewer',
  data() {
    return {
      dialogVisible: false,
      searchQuery: '',
      selectedPerson: null,
      activeTab: 'all',
      eventTabs: [
        { name: '全部', type: 'all' },
        { name: '晋升情况', type: 'jssj' },
        { name: '奖惩情况', type: 'jcsj' },
        { name:'任职情况', type: 'rzsj' },
        { name: '出国情况', type: 'cgsj' },
        { name: '社会关系', type: 'xgsj' },
      ],
      chart: null,
      chartError: null,
      echartsLoaded: false,
      loading: false,
      neo4jData: null,
      expandedNodes: new Set(), // 存储已展开的节点ID
      originData: null, // 存储原始完整数据
      // 颜色映射
      colorMap: {
        center: {
          main: '#1890FF',
          gradient: new Array(2) // 将在初始化时填充
        },
        person: {
          main: '#52C41A',
          gradient: new Array(2)
        },
        org: {
          main: '#FA8C16',
          gradient: new Array(2)
        }
      },
      zoomLevel: 1,
      isFullscreen: false,

      options: {
        "title": {
          "text": "",
          "textStyle": {
            "color": "white"
          },
          "left": "0px",
          "top": "0px"
        },
        "tooltip": {
          trigger: 'item',
          "show": true,
          formatter: function (params) {
            // params.data 包含当前节点的数据
            console.log(params)

            let str = ''

            str += params.data.name + '<br/>'
            if (params.data.nodeInfo.reason) {
              str += '原因：' + params.data.nodeInfo.reason + '<br/>'
            }

            if (params.data.nodeInfo.event_type) {
              str += '事件类型：' + params.data.nodeInfo.event_type + '<br/>'
            }

            return str;
          }
        },
        "legend": {
          "show": true,
          "data": [
            "SPOUSE",
            "担任",
            "参加工作",
            "具有",
            "拟任",
            "生于",
            "是",
            "获得"
          ],
          "selectedMode": "multiple",
          "left": "10px",
          "bottom": "10px",
          "icon": "circle",
          "orient": "vertical",
          "itemWidth": 16,
          "itemHeight": 16,
          "itemGap": 10
        },
        "toolbox": {
          "show": true,
          "feature": {
            "saveAsImage": {
              "name": "知识图谱",
              "type": "png",
              "backgroundColor": "#fff"
            },
            "restore": {
              "title": "刷新"
            },
            "myTool": {
              "show": true,
              "title": "全屏",
              "icon": "path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748",

              onclick: () => {
                this.clickFullScreen(); // 使用箭头函数保持正确的 this 上下文
              },

            }
          },
          "right": "10px",
          "bottom": "10px",
          "orient": "vertical",
          "itemGap": 10
        },
        "xAxis": {
          "show": false
        },
        "yAxis": {
          "show": false
        },
        "grid": {
          "top": "80px"
        },
        "series": [
          {
            "type": "graph",
            "roam": true,
            "focusNodeAdjacency": true,
            "force": {
              "repulsion": 2000,
              "edgeLength": [
                1000,
                300
              ]
            },
            "edgeSymbol": [
              "circle",
              "arrow"
            ],
            "edgeSymbolSize": [
              4,
              10
            ],
            "lineStyle": {
              "color": "black",
              "width": 1,
              "fontSize": 12,
              "normal": {
                "cursor": "default"
              }
            },
            "layout": "force",
            "symbol": "circle",
            "normal": {
              "lineStyle": {
                "color": "black",
                "width": 1,
                "type": "solid",
                "opacity": 1,
                "curveness": 0.5
              }
            },
            "label": {
              "normal": {
                "show": true,
                "position": "bottom",
                rich: {
                  bg: {
                    padding: [3, 5], // 调整内边距
                    borderRadius: 4, // 圆角
                    backgroundColor: '#52606d', // 背景颜色
                    borderColor: '#333', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    color: '#fff' // 文字颜色
                  }
                },
                "textStyle": {
                  "fontSize": 10,
                  "color": "black"
                }
              }
            },
            "edgeLabel": {
              "normal": {
                "show": true,
                "textStyle": {
                  "fontSize": 10,
                  "color": "black"
                }
              }
            },
            "data": [
              {
                "name": "王程杰",
                "nodeInfo": {
                  "id": 77,
                  "name": "王程杰",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "path://M540.458667 58.794667a426.666667 426.666667 0 1 0 426.666666 426.666666 426.666667 426.666667 0 0 0-426.666666-426.666666z m-248.917334 693.333333a248.917333 248.917333 0 0 1 248.917334-248.917333A142.208 142.208 0 1 1 682.666667 361.002667a142.208 142.208 0 0 1-142.208 142.208A248.917333 248.917333 0 0 1 789.333333 752.128H291.541333z"
              },

              {
                "name": "个人信息",
                "nodeInfo": {
                  "id": 100,
                  "name": "个人信息",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  // "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

                "symbol": "image://" + grxx

              },

              {
                "name": "30岁",
                "nodeInfo": {
                  "id": 101,
                  "name": "30岁",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },

              {
                "name": "男",
                "nodeInfo": {
                  "id": 101,
                  "name": "男",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "汉",
                "nodeInfo": {
                  "id": 102,
                  "name": "汉",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "李文静",
                "nodeInfo": {
                  "id": 103,
                  "name": "李文静",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "中电光谷",
                "nodeInfo": {
                  "id": 104,
                  "name": "中电光谷",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "技术主管",
                "nodeInfo": {
                  "id": 105,
                  "name": "技术主管",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },


              {
                "name": "中校",
                "nodeInfo": {
                  "id": 106,
                  "name": "中校",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "中共党员",
                "nodeInfo": {
                  "id": 107,
                  "name": "中共党员",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },


              {
                "name": "已婚",
                "nodeInfo": {
                  "id": 108,
                  "name": "已婚",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "1990-01-01",
                "nodeInfo": {
                  "id": 109,
                  "name": "1990-01-01",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },


              {
                "name": "2010-01-01",
                "nodeInfo": {
                  "id": 110,
                  "name": "2010-01-01",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "885812",
                "nodeInfo": {
                  "id": 111,
                  "name": "885812",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },
              //机构
              {
                "name": "相关机构",
                "nodeInfo": {
                  "id": 120,
                  "name": "相关机构",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#f26667",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + xgjg

              },

              {
                "name": "华东军区征兵办",
                "nodeInfo": {
                  "id": 141,
                  "name": "华东军区征兵办",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#f26667",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ]

              },

              {
                "name": "某集团军新兵训练中心",
                "nodeInfo": {
                  "id": 142,
                  "name": "某集团军新兵训练中心",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#f26667",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ]

              },

              {
                "name": "第74集团军某步兵旅",
                "nodeInfo": {
                  "id": 142,
                  "name": "第74集团军某步兵旅",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#f26667",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ]

              },

              {
                "name": "退役军人事务部广州办事处",
                "nodeInfo": {
                  "id": 143,
                  "name": "退役军人事务部广州办事处",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#f26667",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ]

              },

              {
                "name": "相关人物",
                "nodeInfo": {
                  "id": 150,
                  "name": "相关人物",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#1296db",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + xgrw

              },



              {
                "name": "征兵官张驰",
                "nodeInfo": {
                  "id": 151,
                  "name": "征兵官张驰",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#1296db",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },


              {
                "name": "训练教官李兵",
                "nodeInfo": {
                  "id": 153,
                  "name": "训练教官李兵",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#1296db",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },


              {
                "name": "技能培训师赵小龙",
                "nodeInfo": {
                  "id": 154,
                  "name": "技能培训师赵小龙",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#1296db",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },


              {
                "name": "军衔",
                "nodeInfo": {
                  "id": 160,
                  "name": "军衔",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "green",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + jx,
                // ... existing code ...
              },


              {
                "name": "从少校晋升中校",
                "nodeInfo": {
                  "id": 161,
                  "name": "从少校晋升中校",
                  "type": "Zdby.Person",
                  "reason": "年度考核优秀/工作表现突出",
                  "event_type": "晋升"
                },
                "itemStyle": {
                  "color": "green",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

                // ... existing code ...
              },



              {
                "name": "职位任免",
                "nodeInfo": {
                  "id": 160,
                  "name": "职位任免",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "green",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + gbrm,
                // ... existing code ...
              },

              {
                "name": "温岭市人大常委会办公室副主任变更为预算工作委员会委员",
                "nodeInfo": {
                  "id": 160,
                  "name": "温岭市人大常委会办公室副主任变更为预算工作委员会委员",
                  "type": "Zdby.Person",
                  "reason": "工作需要",
                  "event_type": "任免"
                },
                "itemStyle": {
                  "color": "#d4257a",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

                // ... existing code ...
              },



              {
                "name": "奖惩",
                "nodeInfo": {
                  "id": 171,
                  "name": "奖惩",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "green",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + jc,
                // ... existing code ...
              },


              {
                "name": "安徽省五一劳动奖章",
                "nodeInfo": {
                  "id": 172,
                  "name": "安徽省五一劳动奖章",
                  "type": "Zdby.Person",
                  "reason": "工作表现突出",
                  "event_type": "奖励"
                },
                "itemStyle": {
                  "color": "#fdc991",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },

              {
                "name": "记过处分",
                "nodeInfo": {
                  "id": 173,
                  "name": "记过处分",
                  "type": "Zdby.Person",
                  "reason": "违反部队管理规定，擅自离岗外出，未履行请假手续；不遵守保密纪律，在非保密场所谈论涉密事项。",
                  "event_type": "惩处"
                },
                "itemStyle": {
                  "color": "#fdc991",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
              },


              {
                "name": "评级",
                "nodeInfo": {
                  "id": 180,
                  "name": "评级",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "green",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],
                "symbol": "image://" + zydj,
                // ... existing code ...
              },



              {
                "name": "自专业三级晋升至专业四级",
                "nodeInfo": {
                  "id": 181,
                  "name": "自专业三级晋升至专业四级",
                  "type": "Zdby.Person",
                  "reason": "表现卓越、贡献突出",
                  "event_type": "评级"
                },
                "itemStyle": {
                  "color": "#ff9a2e",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },

              {
                "name": "相关档案",
                "nodeInfo": {
                  "id": 200,
                  "name": "相关档案",
                  "type": "Zdby.Person"
                },
                "itemStyle": {
                  "color": "#fac455",
                  // "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

                "symbol": "image://" + xgda

              },

              {
                "name": "FZ02-Y-WS-W1955-001-002",
                "nodeInfo": {
                  "id": 202,
                  "name": "FZ02-Y-WS-W1955-001-002",
                  "type": "Zdby.Person",

                },
                "itemStyle": {
                  "color": "#9fd1d8",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },

              {
                "name": "FZ02-Y-WS-W1999-003-002",
                "nodeInfo": {
                  "id": 201,
                  "name": "FZ02-Y-WS-W1999-003-002",
                  "type": "Zdby.Person",

                },
                "itemStyle": {
                  "color": "#9fd1d8",
                  "borderColor": "#000000",
                  "borderWidth": 1
                },
                "draggable": true,
                "symbolSize": [
                  30,
                  30
                ],

              },











            ],
            "categories": [
              {
                "name": "个人属性"
              },
              {
                "name": "年龄"
              },
              {
                "name": "性别"
              },
              {
                "name": "民族"
              },
              {
                "name": "配偶"
              },
              {
                "name": "机构"
              },
              {
                "name": "职务"
              },
              {
                "name": "军衔"
              },
              {
                "name": "政治面貌"
              },
              {
                "name": "婚姻状态"
              },
              {
                "name": "出生日期"
              },
              {
                "name": "入党时间"
              },
              {
                "name": "电话号码"
              },
              {
                "name": "相关机构"
              },

              {
                "name": "入伍报名及体检"
              },

              {
                "name": "接受基础军事训练"
              },

              {
                "name": "服役执行任务"
              },

              {
                "name": "退役安置"
              },

              {
                "name": "相关人物"
              },

              { "name": "入伍手续办理" },

              { "name": "基础军事训练指导" },

              { "name": "专业技能提升培训" },

              { "name": "相关军衔" },
              { "name": "军衔晋升" },
              { "name": "相关职位" },
              { "name": "职位变更" },
              { "name": "相关奖惩" },
              { "name": "奖励" },
              { "name": "惩处" },
              { "name": "相关评级" },

              { "name": "评级" },
              { "name": "相关档案" },
              { "name": "来源" }


            ],
            "links": [

              {
                category: "个人属性",
                target: "王程杰",
                source: "个人信息"
              },
              {
                category: "年龄",
                target: "个人信息",
                source: "30岁"
              },
              {
                category: "性别",
                target: "个人信息",
                source: "男"
              },
              {
                category: "民族",
                target: "个人信息",
                source: "汉"
              },
              {
                category: "配偶",
                target: "个人信息",
                source: "李文静"
              },
              {
                category: "机构",
                target: "个人信息",
                source: "中电光谷"
              },
              {
                category: "职务",
                target: "个人信息",
                source: "技术主管"
              },
              {
                category: "军衔",
                target: "个人信息",
                source: "中校"
              },

              {
                category: "政治面貌",
                target: "个人信息",
                source: "中共党员"
              },
              {
                category: "婚姻状态",
                target: "个人信息",
                source: "已婚"
              },
              {
                category: "出生日期",
                target: "个人信息",
                source: "1990-01-01"
              },
              {
                category: "入党时间",
                target: "个人信息",
                source: "2010-01-01"
              },
              {
                category: "电话号码",
                target: "个人信息",
                source: "885812"
              },
              {
                category: "相关机构",
                target: "王程杰",
                source: "相关机构"
              },

              {
                category: "入伍报名及体检",
                target: "相关机构",
                source: "华东军区征兵办"
              },

              {
                category: "接受基础军事训练",
                target: "相关机构",
                source: "某集团军新兵训练中心"
              },

              {
                category: "服役执行任务",
                target: "相关机构",
                source: "第74集团军某步兵旅"
              },

              {
                category: "退役安置",
                target: "相关机构",
                source: "退役军人事务部广州办事处"
              },

              {
                category: "相关人物",
                target: "王程杰",
                source: "相关人物"
              },

              {
                category: "入伍手续办理",
                target: "相关人物",
                source: "征兵官张驰"
              },

              {
                category: "基础军事训练指导",
                target: "相关人物",
                source: "训练教官李兵"
              },

              {
                category: "专业技能提升培训",
                target: "相关人物",
                source: "技能培训师赵小龙"
              },

              {
                category: "相关军衔",
                target: "王程杰",
                source: "军衔"
              },

              {
                category: "军衔晋升",
                target: "军衔",
                source: "从少校晋升中校"
              },

              {
                category: "相关职位",
                target: "王程杰",
                source: "职位任免"
              },

              {
                category: "职位变更",
                target: "职位任免",
                source: "温岭市人大常委会办公室副主任变更为预算工作委员会委员"
              },

              {
                category: "相关奖惩",
                target: "王程杰",
                source: "奖惩"
              },

              {
                category: "奖励",
                target: "奖惩",
                source: "安徽省五一劳动奖章"
              },

              {
                category: "惩处",
                target: "奖惩",
                source: "记过处分"
              },

              {
                category: "相关评级",
                target: "王程杰",
                source: "评级"
              },

              {
                category: "评级",
                target: "评级",
                source: "自专业三级晋升至专业四级"
              },

              {
                category: "相关档案",
                target: "王程杰",
                source: "相关档案"

              },
              {
                category: "来源",
                target: "相关档案",
                source: "FZ02-Y-WS-W1955-001-002"
              },
              {
                category: "来源",
                target: "相关档案",
                source: "FZ02-Y-WS-W1999-003-002"
              }

            ]
          }
        ]
      }


    }
  },
  computed: {
    filteredEvents() {
      if (!this.selectedPerson) return [];

      if (this.activeTab === 'all') {
        return this.selectedPerson.events;
      } else {
        return this.selectedPerson.events.filter(event => event.type === this.activeTab);
      }
    }
  },
  mounted() {
    // 在组件挂载后立即加载ECharts
    this.loadECharts();

    // 监听ESC键退出全屏
    document.addEventListener('keydown', this.handleKeyDown);

    // 添加窗口大小改变监听
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    // 清理图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }

    // 移除事件监听
    window.removeEventListener('resize', this.resizeChart);
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    quickSearch(name) {
      this.searchQuery = name;
      this.searchPerson();
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;

      // 在下一个渲染周期调整图表大小
      this.$nextTick(() => {
        if (this.chart) {
          // 给DOM结构一些时间来调整
          setTimeout(() => {
            // 强制重新计算图表容器尺寸
            const container = this.$refs.chartContainer;
            if (container) {
              // 全屏时设置一个固定的大高度，确保撑满屏幕
              if (this.isFullscreen) {
                container.style.height = `${window.innerHeight - 80}px`;
              } else {
                container.style.height = '';
              }
            }
            this.chart.resize();

            // 全屏后重置图表并等待一小段时间后再次调整
            if (this.isFullscreen) {
              this.resetZoom();

              // 延迟一段时间再次调整，确保图表完全展开
              setTimeout(() => {
                if (this.chart) {
                  this.chart.resize();

                  // 稍微调整一下缩放比例以触发完全重绘
                  const currentZoom = this.zoomLevel;
                  this.chart.setOption({
                    series: [{
                      zoom: currentZoom * 0.95
                    }]
                  });

                  setTimeout(() => {
                    this.chart.setOption({
                      series: [{
                        zoom: currentZoom
                      }]
                    });
                  }, 100);
                }
              }, 300);
            }
          }, 200);
        }
      });
    },
    handleKeyDown(e) {
      // 按ESC键退出全屏
      if (e.key === 'Escape' && this.isFullscreen) {
        this.isFullscreen = false;
        this.$nextTick(() => {
          if (this.chart) {
            // 给DOM结构一些时间来调整
            setTimeout(() => {
              // 恢复正常模式下的容器高度
              const container = this.$refs.chartContainer;
              if (container) {
                container.style.height = '';
              }

              this.chart.resize();
              this.resetZoom();

              // 延迟一段时间再次调整，确保图表完全适应新大小
              setTimeout(() => {
                if (this.chart) {
                  this.chart.resize();
                }
              }, 300);
            }, 200);
          }
        });
      }
    },
    loadECharts() {
      // 在Vue原型上已经有$echarts了，直接使用
      if (this.$echarts) {
        this.echartsLoaded = true;
        console.log('ECharts已通过Vue原型加载');
        return Promise.resolve();
      }

      console.error('Vue原型上未找到$echarts');
      return Promise.reject(new Error('Vue原型上未找到$echarts'));
    },
    async searchPerson() {
      this.chartError = null;
      // 重置展开节点集合
      this.expandedNodes = new Set();
      this.originData = null;

      // 模拟API调用，实际应用中应该调用后端API
      if (this.searchQuery.trim() === '') {
        return;
      }

      try {
        // 显示加载状态
        this.loading = true;
        
        // 调用实际API接口
        const response = await personApi('getPerson', {
          person_name: this.searchQuery,
        });
   
        // 检查响应状态
        if (response.code === 200) {
          // 处理成功响应
          const data = response.data;
          
          // 保存人物信息和事件数据
          this.selectedPerson = {
            name: data.person.name,
            gender: data.person.gender,
            ethnicity: data.person.ethnicity,
            political_status: data.person.political_status,
            marital_status: data.person.marital_status,
            birth_date: data.person.birth_date,
            party_join_date: data.person.party_join_date,
            enlistment_date: data.person.enlistment_date,
            discharge_date: data.person.discharge_date,
            native_place: data.person.native_place,
            education: data.person.education,
            graduation_institution: data.person.graduation_institution,
            skills_and_expertise: data.person.skills_and_expertise,
            events: data.events || [] // 确保 events 有默认值
          };
          
          // 保存 neo4j 图谱数据
          this.neo4jData = data.neo4jData;
          
          // 初始化图表
          this.$nextTick(() => {
            this.initChart();
            
            // 延迟执行一次重置，确保图表适应容器
            setTimeout(() => {
              this.resetZoom();
            }, 500);
          });
        }
      } catch (error) {
        // 处理异常
        console.error('获取数据出错:', error);
        this.$message.error('获取数据出错：' + (error.message || '未知错误'));
        this.chartError = '获取数据出错：' + (error.message || '未知错误');
      } finally {
        // 隐藏加载状态
        this.loading = false;
      }
    },
    // 设置人物数据并初始化图表
    setPersonData() {
      // 模拟数据，实际应用中应该从API获取
      this.selectedPerson = {
        name: '王程杰',
        gender: '男',
        grade: '汉',
        political_status: '中共党员',
        marital_status: '已婚',
        spouse: "李文静",
        organization: "中电光谷",
        position: "技术主管",
        birth_date: "1990-01-01",
        party_join_date: "2010-01-01",
        phone_number: "885812",
        military_rank: "中校",
        events: [
          {
            type: 'task',
            date: '2023-01-15',
            title: '项目任务',
            description: '负责XX项目的架构设计和技术选型'
          },
          {
            type: 'promotion',
            date: '2022-06-10',
            title: '晋升',
            description: '从开发工程师晋升为技术主管'
          },
          {
            type: 'task',
            date: '2022-03-22',
            title: '技术攻关',
            description: '解决了系统性能瓶颈问题'
          },
          {
            type: 'discipline',
            date: '2021-11-05',
            title: '警告',
            description: '因代码质量问题收到口头警告'
          }
        ],

      };

      // 确保DOM已经更新后再初始化图表
      this.$nextTick(() => {
        // 给DOM一点时间渲染
        setTimeout(() => {
          try {
            this.initChart();
            console.log('图表初始化成功');
          } catch (err) {
            console.error('初始化图表失败:', err);
            this.chartError = '初始化图表失败: ' + err.message;
          }
        }, 100);
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },


    getNeo4jData() {
      if (!this.neo4jData) {
        return {
          ...this.options,
          series: [{
            ...this.options.series[0],
            data: [],
            categories: [],
            links: []
          }]
        };
      }
      
      // 处理从后端获取的数据
      const graphData = [];
      const nodeMap = {}; // 创建节点ID到索引的映射
      
      // 查找中心人物节点ID（symbol为zhongxin的节点）
      const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
      const centerPersonId = centerPerson ? centerPerson.id : null;
      
      // 处理节点显示逻辑
      if (this.neo4jData.person && this.neo4jData.person.length > 0) {
        // 第一步：将所有节点添加到nodeMap，但不全部添加到graphData
        this.neo4jData.person.forEach((node, index) => {
          nodeMap[node.id] = {
            index: index,
            node: node,
            inGraph: false // 标记节点是否已添加到图中
          };
          
          // 同时支持通过名称查找
          if (node.name) {
            nodeMap[node.name] = {
              index: index,
              node: node,
              inGraph: false
            };
          }
        });
        
        // 第二步：先添加中心人物节点
        if (centerPersonId && nodeMap[centerPersonId]) {
          const node = nodeMap[centerPersonId].node;
          graphData.push({
            name: node.name,
            id: node.id,
            nodeInfo: {
              id: node.id,
              name: node.name,
              type: node.type
            },
            itemStyle: {
              color: node.color || "#fac455",
              borderColor: "#000000",
              borderWidth: 1
            },
            draggable: true,
            symbolSize: [30, 30],
            symbol: this.getSymbolPath(node.symbol)
          });
          
          nodeMap[centerPersonId].inGraph = true;
          nodeMap[centerPersonId].graphIndex = 0;
        }
        
        // 第三步：添加中心人物的一级直接关联节点
        // 获取与中心人物直接相连的链接
        const directLinks = centerPersonId ? 
          this.neo4jData.links.filter(link => 
            link.source === centerPersonId || link.target === centerPersonId
          ) : [];
        
        // 添加一级节点到图中
        directLinks.forEach(link => {
          const targetId = link.source === centerPersonId ? link.target : link.source;
          if (nodeMap[targetId] && !nodeMap[targetId].inGraph) {
            const node = nodeMap[targetId].node;
            graphData.push({
              name: node.name,
              id: node.id,
              nodeInfo: {
                id: node.id,
                name: node.name,
                type: node.type
              },
              itemStyle: {
                color: node.color || "#fac455",
                borderColor: "#000000",
                borderWidth: 1
              },
              draggable: true,
              symbolSize: [30, 30],
              symbol: this.getSymbolPath(node.symbol)
            });
            
            nodeMap[targetId].inGraph = true;
            nodeMap[targetId].graphIndex = graphData.length - 1;
          }
        });
        
        // 第四步：添加已展开节点的下级节点
        this.expandedNodes.forEach(expandedId => {
          if (!nodeMap[expandedId] || !nodeMap[expandedId].inGraph) return;
          
          // 获取与已展开节点直接相连的链接
          const expandedLinks = this.neo4jData.links.filter(link => 
            (link.source === expandedId || link.target === expandedId) && 
            // 确保链接的另一端不是中心人物（避免重复）
            !(link.source === centerPersonId || link.target === centerPersonId)
          );
          
          // 添加扩展节点
          expandedLinks.forEach(link => {
            const targetId = link.source === expandedId ? link.target : link.source;
            if (nodeMap[targetId] && !nodeMap[targetId].inGraph) {
              const node = nodeMap[targetId].node;
              graphData.push({
                name: node.name,
                id: node.id,
                nodeInfo: {
                  id: node.id,
                  name: node.name,
                  type: node.type
                },
                itemStyle: {
                  color: node.color || "#fac455",
                  borderColor: "#000000",
                  borderWidth: 1
                },
                draggable: true,
                symbolSize: [30, 30],
                symbol: this.getSymbolPath(node.symbol)
              });
              
              nodeMap[targetId].inGraph = true;
              nodeMap[targetId].graphIndex = graphData.length - 1;
            }
          });
        });
      }
      
      // 处理连接关系 - 只显示图中已有节点之间的连接
      const processedLinks = [];
      if (this.neo4jData.links && this.neo4jData.links.length > 0) {
        this.neo4jData.links.forEach(link => {
          // 确保源节点和目标节点都在图中
          if (nodeMap[link.source] && nodeMap[link.source].inGraph && 
              nodeMap[link.target] && nodeMap[link.target].inGraph) {
            
            processedLinks.push({
              source: nodeMap[link.source].graphIndex,
              target: nodeMap[link.target].graphIndex,
              category: link.category
            });
          }
        });
      }
      
      // 处理分类信息
      const categories = [];
      if (this.neo4jData.categories && this.neo4jData.categories.length > 0) {
        this.neo4jData.categories.forEach(category => {
          categories.push({
            name: category.name
          });
        });
      }
      
      const newOptions = {
        ...this.options,
        series: [{
          ...this.options.series[0],
          // 修改边的标签配置
          type: "graph",
          roam: true,
          focusNodeAdjacency: true,
          force: {
            repulsion: 2000,
            edgeLength: [1000, 300]
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          lineStyle: {
            color: 'black',
            width: 1,
            fontSize: 12,
            normal: {
              cursor: "default"
            }
          },
          layout: "force",
          symbol: 'circle',
          normal: {
            lineStyle: {
              color: 'black',
              width: 1,
              type: 'solid',
              opacity: 1,
              curveness: 0.5
            }
          },
          label: {
            normal: {
              show: true,
              position: "bottom",
              formatter: (params) => {
                // 检查节点是否有更多可展开的连接
                const nodeId = params.data.id;
                const hasMoreConnections = this.hasMoreConnections(nodeId);
                
                // 为可展开的节点添加+号标记
                if (hasMoreConnections && !this.expandedNodes.has(nodeId)) {
                  return '{bg|' + params.name + ' +}';
                }
                return '{bg|' + params.name + '}';
              },
              rich: {
                bg: {
                  padding: [3, 5],
                  borderRadius: 4,
                  backgroundColor: '#52606d',
                  borderColor: '#333',
                  borderWidth: 1,
                  color: '#fff'
                }
              },
              textStyle: {
                fontSize: 10,
                color: 'black'
              }
            }
          },
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: 'black'
              },
              formatter: function (param) {
                return param.data.category;
              }
            }
          },
          // 添加处理好的数据
          data: graphData,
          links: processedLinks,
          categories: categories
        }]
      };
      return newOptions;
    },

    // 添加判断节点是否有更多连接的方法
    hasMoreConnections(nodeId) {
      if (!this.neo4jData || !this.neo4jData.links) return false;
      
      // 查找与该节点相关的所有链接
      const allConnections = this.neo4jData.links.filter(link => 
        link.source === nodeId || link.target === nodeId
      );
      
      // 查找当前已展示的链接数量
      let displayedConnections = 0;
      
      allConnections.forEach(link => {
        const otherEndId = link.source === nodeId ? link.target : link.source;
        
        // 中心人物节点
        const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
        const centerPersonId = centerPerson ? centerPerson.id : null;
        
        // 如果是与中心节点的连接，肯定已显示
        if (otherEndId === centerPersonId) {
          displayedConnections++;
          return;
        }
        
        // 如果另一端节点已展开或在已展开节点中，则该连接已显示
        if (this.expandedNodes.has(otherEndId)) {
          displayedConnections++;
          return;
        }
        
        // 如果当前节点已展开，则所有相连节点应该都显示
        if (this.expandedNodes.has(nodeId)) {
          displayedConnections++;
          return;
        }
        
        // 处理特殊情况：如果两个节点都是一级节点（都直接连接到中心节点）
        const isOtherEndConnectedToCenter = this.neo4jData.links.some(l => 
          (l.source === centerPersonId && l.target === otherEndId) || 
          (l.target === centerPersonId && l.source === otherEndId)
        );
        
        const isNodeConnectedToCenter = this.neo4jData.links.some(l => 
          (l.source === centerPersonId && l.target === nodeId) || 
          (l.target === centerPersonId && l.source === nodeId)
        );
        
        if (isOtherEndConnectedToCenter && isNodeConnectedToCenter) {
          displayedConnections++;
        }
      });
      
      // 如果实际连接数大于已显示连接数，则有未显示的连接
      return allConnections.length > displayedConnections;
    },

    // 预处理数据，直接在数据中添加颜色属性

    async initChart() {
      await this.$nextTick();
      const chartDom = document.getElementById("main");
      if (!chartDom) return;

      // 清理旧图表
      if (this.chart) {
        this.chart.dispose();
      }
      
      // 保存原始完整数据，以便后续展开节点使用
      if (!this.originData && this.neo4jData) {
        this.originData = JSON.parse(JSON.stringify(this.neo4jData));
      }
      
      // 初始化图表
      this.chart = this.$echarts.init(chartDom);

      // 获取图表配置
      let options = this.getNeo4jData();

      // 设置图表配置
      this.chart.setOption(options);

      // 添加点击事件处理
      this.chart.on('click', (params) => {
        if (params.dataType === 'node') {
          // 如果点击的是节点
          const nodeData = params.data;
          console.log('Clicked node:', nodeData);
          
          // 节点展开/收起逻辑
          this.toggleNodeExpand(nodeData.id);
        }
      });

      // 处理图表交互
      this.chart.on('graphRoam', () => {
        // 更新当前缩放级别
        const opt = this.chart.getOption();
        if (opt.series[0].zoom) {
          this.zoomLevel = opt.series[0].zoom;
        }
      });
    },

    // 修改节点展开/收起的方法
    toggleNodeExpand(nodeId) {
      // 获取中心人物节点ID
      const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
      const centerPersonId = centerPerson ? centerPerson.id : null;
      
      // 如果点击的是中心人物节点，不执行任何操作
      if (nodeId === centerPersonId) {
        return;
      }
      
      if (this.expandedNodes.has(nodeId)) {
        // 如果节点已展开，则收起
        this.expandedNodes.delete(nodeId);
      } else {
        // 如果节点未展开，则展开
        this.expandedNodes.add(nodeId);
      }
      
      // 重新渲染图表
      if (this.chart) {
        // 获取当前配置
        const options = this.getNeo4jData();
        // 应用新配置
        this.chart.setOption(options);
      }
    },

    // 修改全屏模式的点击处理
    clickFullScreen() {
      this.dialogVisible = true;

      this.$nextTick(() => {
        const chartContainer = document.getElementById("mainfull");
        if (!chartContainer) return;

        // Initialize the fullscreen chart
        const fullScreenChart = this.$echarts.init(chartContainer);

        // Get the chart options
        const options = this.getNeo4jData();

        // Set the options to the chart
        fullScreenChart.setOption(options);
        
        // 添加节点点击处理
        fullScreenChart.on('click', (params) => {
          if (params.dataType === 'node') {
            // 如果点击的是节点
            const nodeData = params.data;
            
            // 节点展开/收起逻辑
            this.toggleNodeExpand(nodeData.id);
            
            // 更新全屏图表
            const newOptions = this.getNeo4jData();
            fullScreenChart.setOption(newOptions);
          }
        });

        // Add resize handler
        const resizeHandler = () => {
          if (this.dialogVisible) {
            fullScreenChart.resize();
          }
        };

        // Listen for window resize
        window.addEventListener('resize', resizeHandler);

        // Clean up when dialog closes
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener('resize', resizeHandler);
          fullScreenChart.dispose();
        });

        // Force a resize after a short delay to ensure proper rendering
        setTimeout(() => {
          fullScreenChart.resize();
        }, 200);
      });
    },

    // 创建背景图案
    createPatternImage() {
      const canvas = document.createElement('canvas');
      canvas.width = 20;
      canvas.height = 20;
      const ctx = canvas.getContext('2d');

      // 填充白色背景
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, 20, 20);

      // 绘制点状图案
      ctx.fillStyle = 'rgba(0, 0, 0, 0.02)';
      ctx.beginPath();
      ctx.arc(10, 10, 0.8, 0, Math.PI * 2);
      ctx.fill();

      return canvas.toDataURL();
    },
    // 缩放控制
    zoomIn() {
      if (!this.chart) return;

      this.zoomLevel *= 1.2;
      this.chart.setOption({
        series: [{
          zoom: this.zoomLevel
        }]
      });
    },
    zoomOut() {
      if (!this.chart) return;

      console.log(option)

      this.zoomLevel /= 1.2;
      this.chart.setOption(option);
    },
    resetZoom() {
      if (!this.chart) return;

      this.zoomLevel = 1;

      // 先调整图表大小以适应容器
      this.chart.resize();

      // 短暂延迟后强制更新图表
      setTimeout(() => {
        // 先将缩放设为稍小值，触发完整重绘
        this.chart.setOption({
          series: [{
            zoom: 0.9
          }]
        });

        // 然后设置为标准大小
        setTimeout(() => {
          this.chart.setOption({
            series: [{
              zoom: 1
            }]
          });
        }, 100);
      }, 50);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
        // 如果图表已经初始化，延迟调整一次缩放
        setTimeout(() => {
          // 轻微调整缩放以触发重绘
          this.chart.setOption({
            series: [{
              zoom: this.zoomLevel * 0.99
            }]
          });
          // 然后恢复正常缩放
          setTimeout(() => {
            this.chart.setOption({
              series: [{
                zoom: this.zoomLevel
              }]
            });
          }, 50);
        }, 150);
      }
    },
    getSymbolPath(symbolName) {
      if (!symbolName) {
        return 'circle'; // 默认使用圆形
      }
      
      // 如果是以 image:// 或 path:// 开头，说明已经是完整路径，直接返回
      if (symbolName.startsWith('image://') || symbolName.startsWith('path://')) {
        return symbolName;
      }
      
      // 根据图标名称返回对应的图标路径
      switch(symbolName) {
        case 'grxx':
          return 'image://' + grxx;
        case 'xgjg':
          return 'image://' + xgjg;
        case 'xgrw':
          return 'image://' + xgrw;
        case 'jx':
          return 'image://' + jx;
        case 'gbrm':
          return 'image://' + gbrm;
        case 'jc':
          return 'image://' + jc;
        case 'zydj':
          return 'image://' + zydj;
        case 'xgda':
          return 'image://' + xgda;
        case 'zhongxin':
          return 'image://' + zhongxin;
        case 'zzlsbq':
          return 'image://' + zzlsbq;
        case 'xgsj':
          return 'image://' + xgsj;
        // 使用现有图标替代缺失的图标
        case 'shgx':
          return 'image://' + xgrw; // 使用人物关系图标替代社会关系图标
        case 'cgsj':
          return 'image://' + xgsj; // 使用事件图标替代出国事件图标
        case 'jspj':
          return 'image://' + jx;   // 使用军衔图标替代晋升评价图标
        case 'jcsj':
          return 'image://' + jc;   // 使用奖惩图标
        case 'pj':
          return 'image://' + pj;
        case 'zwbd':
          return 'image://' + grxx;
        default:
          return 'circle'; // 默认使用圆形
      }
    },
    scrollTabs(direction) {
      // 获取tabs容器
      const tabsContainer = this.$el.querySelector('.event-tabs');
      if (!tabsContainer) return;
      
      // 计算滚动距离（一次滚动100px）
      const scrollAmount = 100;
      
      // 根据方向滚动
      if (direction === 'left') {
        tabsContainer.scrollBy({
          left: -scrollAmount,
          behavior: 'smooth'
        });
      } else {
        tabsContainer.scrollBy({
          left: scrollAmount,
          behavior: 'smooth'
        });
      }
    }
  }
}
</script>

<style scoped>
.person-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2c3e50;
  overflow: hidden;
}

.search-section {
  padding: 12px 20px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  position: relative;
}

.search-container {
  display: flex;
  max-width: 500px;
  margin: 0 auto 0 0;
  padding-left: 20px;
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  background-color: #f5f7fa;
  color: #606266;
}

.search-input:focus {
  border-color: #409eff;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #409eff, #146ce0);
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.search-button:hover {
  background: linear-gradient(135deg, #66b1ff, #3a8ee6);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.content-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  flex: 1;
  height: calc(100vh - 165px); /* 减去搜索栏的高度 */
  overflow: hidden;
}

@media (min-width: 1024px) {
  .content-container {
    flex-direction: row;
    align-items: stretch;
    height: calc(100vh - 165px);
  }

  .chart-section {
    width: 70%;
    height: 100%;
  }

  .info-section {
    width: 30%;
    height: 100%;
  }
}

.chart-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.info-card,
.events-card,
.chart-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.info-card:hover,
.events-card:hover,
.chart-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: rgba(64, 158, 255, 0.1);
}

.info-content {
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: 1;
}

.info-content::-webkit-scrollbar,
.event-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.info-content::-webkit-scrollbar-track,
.event-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.info-content::-webkit-scrollbar-thumb,
.event-list::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
  transition: all 0.2s;
}

.info-content::-webkit-scrollbar-thumb:hover,
.event-list::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.chart-container {
  flex: 1;
  padding: 10px;
  width: 100%;
  min-height: 500px;
  height: calc(100% - 110px) !important; /* 调整非全屏时的高度 */
  background-color: #ffffff;
  border-radius: 0 0 12px 12px;
  position: relative;
  overflow: hidden;
}

.card-title {
  margin: 0;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  color: #2c3e50;
  background: linear-gradient(to right, #fafafa, #f5f7fa);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.chart-legend {
  display: flex;
  padding: 12px 20px;
  gap: 24px;
  border-bottom: 1px solid #ebeef5;
  background: linear-gradient(to right, #fafafa, #f5f7fa);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.legend-item:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.center-color {
  background: linear-gradient(135deg, #1890ff, #36cbcb);
}

.person-color {
  background: linear-gradient(135deg, #52c41a, #b7eb8f);
}

.org-color {
  background: linear-gradient(135deg, #fa8c16, #ffd591);
}

.chart-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 30px;
  right: 30px;
  gap: 8px;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.75);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.25s ease;
}

.chart-controls:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.control-button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(200, 200, 200, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  color: #666;
  font-weight: normal;
}

.control-button::before {
  content: none; /* 移除之前的光泽效果 */
}

.control-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.control-button:hover {
  transform: translateY(-2px);
  background-color: #f8f8f8;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
}

.control-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.control-button:hover .control-icon {
  transform: scale(1.15);
}

/* 特定按钮样式 - 使用更柔和的颜色 */
.control-button:nth-child(1) {
  /* 放大按钮 */
  color: #6cc067;
}

.control-button:nth-child(2) {
  /* 缩小按钮 */
  color: #e77471;
}

.control-button:nth-child(3) {
  /* 重置按钮 */
  color: #e4a663;
}

.control-button:nth-child(4) {
  /* 全屏按钮 */
  color: #69a9e0;
}

/* 全屏模式下的控制按钮 */
.chart-section.fullscreen .chart-controls {
  bottom: 40px;
  right: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-bottom: 1px dashed #f0f0f0;
  transition: all 0.2s ease; /* 缩短过渡时间 */
  border-radius: 2px; /* 减小圆角 */
}

.info-item:hover {
  background-color: rgba(64, 158, 255, 0.08); /* 稍微调整背景色透明度 */
  padding: 8px 12px 8px 16px; /* 减小左侧padding的变化幅度 */
  border-bottom-color: rgba(64, 158, 255, 0.15);
}

.info-label {
  min-width: 80px;
  color: #606266;
  font-weight: 500;
}

.info-value {
  color: #303133;
  flex: 1;
  font-weight: 500;
  font-size: 13px;
}

.events-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-tabs-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fafafa;
  border: none !important; /* 确保没有边框 */
  border-bottom: none !important; /* 确保底部没有边框 */
  margin-bottom: 5px; /* 添加一些底部间距 */
}

.event-tabs {
  padding: 0 28px;
  display: flex;
  flex-shrink: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  border: none !important;
  border-bottom: none !important;
  background-color: transparent;
}

/* 完全隐藏Webkit浏览器的滚动条 */
.event-tabs::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.event-tabs::-webkit-scrollbar-track {
  display: none;
}

.event-tabs::-webkit-scrollbar-thumb {
  display: none;
}

.tab-scroll-indicator {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(250, 250, 250, 0.9);
  cursor: pointer;
  color: #909399;
  width: 24px;
  z-index: 10;
  border: none !important; /* 确保没有边框 */
}

.tab-scroll-left {
  left: 0;
  box-shadow: none;
}

.tab-scroll-right {
  right: 0;
  box-shadow: none;
}

.tab-scroll-indicator:hover {
  color: #409eff;
  background-color: rgba(245, 245, 245, 0.95);
}

/* 修改所有可能存在的边框样式 */
.event-tab.active::after {
  background-color: #409eff;
  box-shadow: none; /* 移除阴影，可能会导致视觉边框效果 */
}

/* 移除事件列表的顶部边框 */
.event-list {
  border-top: none !important;
}

.event-tab {
  padding: 12px 16px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s;
  position: relative;
  opacity: 0.8;
  flex-shrink: 0;  /* 防止标签被挤压 */
  display: inline-block;  /* 确保标签在一行显示 */
  text-align: center;
  min-width: 80px; /* 确保每个标签有最小宽度 */
}

.event-tab:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.05);
  opacity: 1;
}

.event-tab.active {
  color: #409eff;
  font-weight: 500;
  opacity: 1;
}

.event-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #409eff;
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.3);
}

.event-list {
  padding: 12px 20px;
  flex: 1;
  overflow-y: auto;
  min-height: 50px;
}

.event-item {
  display: flex;
  padding: 12px 10px;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 6px;
  margin-bottom: 8px;
}

.event-item:hover {
  background-color: #f9f9f9;
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.event-item:last-child {
  border-bottom: none;
}

.event-date {
  min-width: 100px;
  color: #909399;
  font-size: 13px;
  font-weight: 500;
  padding-right: 10px;
  border-right: 2px solid #ebeef5;
  display: flex;
  align-items: center;
}

.event-content {
  margin-left: 10px;
  flex: 1;
}

.event-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #303133;
  transition: color 0.2s;
}

.event-item:hover .event-title {
  color: #409eff;
}

.event-description {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}

.no-events {
  text-align: center;
  color: #909399;
  padding: 30px 0;
  font-size: 14px;
}

.chart-error {
  text-align: center;
  color: #f56c6c;
  padding: 20px;
  font-size: 14px;
  background-color: #fef0f0;
  border-radius: 4px;
  margin: 20px;
}

/* 空状态样式 */
.empty-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-chart-content,
.empty-info-content,
.empty-events-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-title {
  font-size: 18px;
  color: #5e6d82;
  margin-bottom: 8px;
  font-weight: 500;
}

.empty-desc {
  font-size: 14px;
  color: #909399;
  margin-bottom: 24px;
  line-height: 1.6;
}

.sample-search {
  margin-top: 20px;
  text-align: center;
}

.sample-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.sample-tag {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f0f2f5;
  color: #606266;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.sample-tag:hover {
  background-color: #e6f7ff;
  color: #409eff;
}

.empty-info,
.empty-events {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.event-tabs {
  flex-shrink: 0; /* 防止tabs被压缩 */
}

.card-title {
  flex-shrink: 0; /* 防止标题被压缩 */
}

/* 全屏模式样式 */
.chart-section.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  z-index: 1000;
  padding: 0;
  background-color: #f5f7fa;
}

.chart-section.fullscreen .chart-container {
  height: calc(100vh - 110px) !important; /* 调整高度，减去标题和图例的高度 */
  position: relative;
  padding: 20px 40px 20px 240px;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-section.fullscreen .chart-card {
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.chart-section.fullscreen .card-title {
  padding: 15px 15px 15px 240px;
  height: 50px; /* 固定标题高度 */
}

.chart-section.fullscreen .chart-legend {
  padding: 10px 15px 10px 240px;
  height: 60px; /* 固定图例高度 */
}

/* 全屏模式下修改图表控制按钮位置 */
.chart-section.fullscreen .chart-controls {
  bottom: 40px;
  right: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  z-index: 1010;
}

.chart-card {
  display: flex;
  flex-direction: column;
  height: 100% !important; /* 确保卡片占满容器高度 */
  position: relative;
}

.full-screen-chart {
  width: 100%;
  height: calc(100vh - 60px) !important;
  margin: 0;
  padding: 0;
}

.el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

.el-dialog__body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #409eff;
  animation: spin 1s ease-in-out infinite;
}

.loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 以下样式会覆盖上面的样式 */
.events-card {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-radius: 4px;
}

.card-title {
  padding: 12px 15px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  position: relative;
  border-bottom: none !important; /* 确保没有底部边框 */
}

/* 清除所有元素上的滚动条的下滑线或边框 */
.el-scrollbar__wrap,
.el-scrollbar,
.el-scrollbar__bar,
.el-scrollbar__thumb {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.events-content {
  border-top: none !important;
}
</style>